<!-- 退单 -->
<template>
  <div class="orderBack-main">
    <!-- 搜索 -->
    <el-card>
      <div slot="header">
        <span>退单搜索</span>
      </div>
      <el-row>
        <el-col :span="6">
          <el-input
            size="small"
            style="width:220px"
            v-model="search.username"
            placeholder="根据用户名查询"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-select size="small" v-model="search.status" placeholder="订单状态">
            <el-option
              v-for="(item,index) in orderBackStatus"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select size="small" v-model="search.statusend" placeholder="是否关闭">
            <el-option
              v-for="(item,index) in orderBackStatusEnd"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" style="text-align:right">
          <el-button size="small" type="default" @click="doreset">重置</el-button>
          <el-button size="small" type="primary" @click="dosearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 退单列表页 -->
    <el-card>
      <div slot="header">
        <span>退单列表页</span>
      </div>
      <el-table :data="orderBackList" border style="width: 100%">
        <el-table-column align="center" fixed type="index" label="#" width="60"></el-table-column>
        <el-table-column align="center" prop="backId" label="退单编号" width="270"></el-table-column>
        <el-table-column align="center" prop="addtime" label="申请时间" width="180"></el-table-column>
        <el-table-column align="center" prop="username" label="用户账号" width="120"></el-table-column>
        <el-table-column align="center" prop="order_price" label="订单金额" width="120"></el-table-column>
        <el-table-column align="center" prop="count" label="订单数量" width="120"></el-table-column>
        <el-table-column align="center" prop="statusend" label="是否关闭" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.statusend==0" style="color:red">正在进行</div>
            <div v-else style="color:green">已结束</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="endtime" label="完成时间" width="220"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleView(scope.row.backId)" type="text" size="small">查看订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin:15px; float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalcount"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import orderBackApi from "@/api/order/orderBack";
import _ from 'lodash'
export default {
  name:'orderBackList',
  data() {
    return {
      search: {},
      orderBackList: [],
      orderBackStatus: {
        "0": "等待处理",
        "1": "正在处理",
        "2": "已处理",
        "9": "拒绝退货",
      },
      orderBackStatusEnd: {
        "0": "正在进行",
        "1": "已处理",
      },
      page:{
          start:1,
          limit:10,
          sizes:[10,20,30],
          totalcount:0
      }
    };
  },
  computed: {},
  created() {
    this.getorderBackList();
  },
  methods: {
    //获取退单列表
    getorderBackList() {
      var params={
          start:this.page.start,
          limit:this.page.limit,
          ...this.search
      }
      params=_.pickBy(params,item=>item)
      _.pickBy(params,function(v){
          return v
      })
      orderBackApi.orderBackList(params).then((res) => {
        this.orderBackList = res.data.list;
        this.page.totalcount=res.data.totalRow
      });
    },
    //重置
    doreset() {
        this.search={}
    },
    //搜索
    dosearch() {
        this.getorderBackList()
    },

    handleSizeChange(val){
      this.page.limit=val
      this.getorderBackList()
    },

    handleCurrentChange(val){
      this.page.start=val
      this.getorderBackList()
    },
    handleView(id){
      this.$router.push({name:'orderBackDetail',params:{id}})
    }

  },
};
</script>
<style lang='scss' scoped>
.orderBack-main {
  .el-card {
    margin: 30px;
  }
}
</style>